<!DOCTYPE html>

<html lang="en">
<head>
    <!-- The jQuery library is a prerequisite for all jqSuite products -->
    <script type="text/ecmascript" src="../../../js/jquery.min.js"></script>
    <!-- This is the Javascript file of jqGrid -->
    <script type="text/ecmascript" src="../../../js/trirand/jquery.jqGrid.min.js"></script>
    <!-- This is the localization file of the grid controlling messages, labels, etc. -->
    <!-- We support more than 40 localizations -->
    <script type="text/ecmascript" src="../../../js/trirand/i18n/grid.locale-en.js"></script>
    <!-- A link to a jQuery UI ThemeRoller theme, more than 22 built-in and many more custom -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/jquery-ui.css" />
    <!-- The link to the CSS that the grid needs -->
    <link rel="stylesheet" type="text/css" media="screen" href="../../../css/trirand/ui.jqgrid.css" />

    <meta charset="utf-8" />
    <title>jqGrid Loading Data - Toolbar Searching with Search Options</title>
</head>
<body>

    <style type="text/css">

        /* set the size of the datepicker search control for Order Date*/
        #ui-datepicker-div { font-size:11px; }

        /* set the size of the autocomplete search control*/
        .ui-menu-item {
            font-size: 11px;
        }

         .ui-autocomplete {
            font-size: 11px;
        }

    </style>

    <table id="jqGrid"></table>
    <div id="jqGridPager"></div>

    <script type="text/javascript">

$(document).ready(function () {
	var _division = 1, _glNum = 2;
	$("#jqGrid").jqGrid({
		url: "newjson.json",
		datatype: "json",
		postData: '{Division: "' + _division + '", GLNum: "' + _glNum + '"}',
		ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
		mtype: "POST",
		jsonReader: {
			root: function (obj) {
			return typeof obj.d === "string" ? $.parseJSON(obj.d) : obj.d;
			},
			repeatitems: false
		},
		loadonce:true,
		page: 1,
		colModel: [
		{
			label: "GL Acct. No",
			//sorttype: 'integer',
			name: 'GLAcct',
			index:'GLAcct',
			width: 120,
			search: true
		},
		{
			label: "Borough",
			//sorttype: 'integer',
			name: 'Borough',
			index: 'Borough',
			width: 120,
			search: true
		},
		{
			label: "GL Description",
			//sorttype: 'integer',
			name: 'GLDescription',
			index: 'GLDescription',
			key:true,
			width: 120,
			search: true
		},
		{
			label: "Begin Balance",
			//sorttype: 'integer',
			name: 'BeginBalance',
			index: 'BeginBalance',
			width: 120,
			search: true
		},
		{
			label: "Todays Debits",
			//sorttype: 'integer',
			name: 'TodaysDebits',
			index: 'TodaysDebits',
			width: 120,
			search: true
		},
		{
			label: "Todays Credits",
			//sorttype: 'integer',
			name: 'TodaysCredits',
			index: 'TodaysCredits',
			width: 120,
			search: true
		},
		{
			label: "Current Balance",
			//sorttype: 'integer',
			name: 'CurrentBalance',
			index: 'CurrentBalance',
			width: 120,
			search: true
		},
		{
			label: "Date Tran",
			//sorttype: 'integer',
			name: 'DateLastTran',
			index: 'DateLastTran',
			width: 120,
			search: true
		}
		],
		viewrecords: true,
		gridview: true,
		width: 'auto',
		height: 'auto',
		rowNum: 10,
		pager: "#jqGridPager"
		});
	$('#jqGrid').jqGrid('filterToolbar', { searchOnEnter: false, enableClear: false });
	//// activate the toolbar searching
	$('#jqGrid').jqGrid('navGrid', "#jqGridPager", {
	search: false, // show search button on the toolbar
	add: false,
	edit: false,
	del: false,
	refresh: true
	});
	$("#jqGrid").jqGrid('setGridParam', {postData : {}});
});

    </script>

    <!-- This code is related to code tabs -->
    <br />
    <span style="font-size: 12px; font-family: Tahoma">Click on the Tabs below the see the relevant code for the example:</span>
    <br /><br />
    <div id="codetabs" style="width:700px; height: 400px; font-size:65%;"></div>
    <script type="text/ecmascript" src="../../../js/jquery-ui.min.js"></script>
    <script type="text/ecmascript" src="../../../js/prettify/prettify.js"></script>
    <link rel="stylesheet" href="../../../css/prettify.css" />
        <script type="text/ecmascript" src="../../../js/codetabs.js"></script><script type="text/ecmascript" src="../../../js/themeswitchertool.js"></script>

    <script type="text/javascript">

        var tabData =
            [
                { name: "HTML", url: "index.html", lang: "lang-html" },
                { name: "Data", url: "data.json", lang: "lang-json" },
				{ name: "Description", url: "description.html", lang: "lang-html" }
            ];

        codeTabs(tabData);

    </script>
    <!-- End of code related to code tabs -->
</body>
</html>
